import {
    cas
    // 剩下的请求方法记得用逗号分隔
} from "./request.js"
let hihi = document.querySelectorAll(".hihi")
console.log(hihi)
cas().then(res => {
    // console.log(res.data.Carousels);
    let urls = res.data.Carousels
    hihi[0].src = urls[0].url
    // hihi[1].src = urls[1].url
    // hihi[2].src = urls[2].url
    // hihi[3].src = urls[3].url
    // hihi[4].src = urls[4].url
    // hihi[5].src = urls[5].url
    var i = 1
    lazyImgFn();
    // 封装懒加载函数
    function lazyImgFn() {
        console.log("滚动中...");
        // 记录网页滚动的scrollTop距离
        let domScropTop = document.documentElement.scrollTop;
        // 获取需要懒加载的图片元素
        let lazyImgs = document.querySelectorAll("img[lazyload='true']");

        // 计算图片是否到达可视区域
        // 遍历所有需要懒加载的图片, 目的是获取所有的图片离顶部的距离
        lazyImgs.forEach((el) => {
            // 浏览器屏幕高度 + 文档的scropTop >= 图片距离文档顶部的高度
            if (window.innerHeight + domScropTop >= el.offsetTop) {
                // 到达可视区域
                // 将data-src属性值赋值给对应图片src属性
                el.setAttribute("src", urls[i].url);
                // console.log(index)

                // 将lazyload属性修改为false(判断是否需要进行懒加载)
                el.setAttribute("lazyload", "false");
                i++
            }
        });
    }

    // 监听页面滚动事件
    document.addEventListener("scroll", () => {
        lazyImgFn();
    });
})